<template>
  <div>
    <el-container>
      <el-aside :width="asideWidth">
        <div style="height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center">
          <img src="@/assets/images/logo1.png" style="width: 30px;" alt="">
          <span class="logo-title" v-show="!isCollapse">Admin欢迎</span>
        </div>
        <el-menu router :collapse="isCollapse" :collapse-transition="false" background-color="#001529"
                 active-text-color="#fff" text-color="rgba(255, 255, 255, 0.65)" :default-active="$route.path"
                 style="border: none">
          <el-menu-item index="/admin/main">
            <i class="el-icon-s-home"></i>

            <!-- eslint-disable-next-line -->
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <!-- eslint-disable-next-line -->
            <template slot="title"><i class="el-icon-menu"></i><span>信息管理</span></template>
            <el-menu-item index="/admin/user">用户管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <!-- eslint-disable-next-line -->
            <template slot="title"><i class="el-icon-setting"></i><span>系统管理</span></template>
            <el-menu-item index="/admin/airliner">客机管理</el-menu-item>
            <el-menu-item index="/admin/flight">航班管理</el-menu-item>
            <el-menu-item index="/admin/flight-order">航班订单管理</el-menu-item>
            <el-menu-item index="/admin/flight-refund">航班退单管理</el-menu-item>
            <el-menu-item index="/admin/hotel-info">酒店信息管理</el-menu-item>
            <el-menu-item index="/admin/hotel-room">酒店客房管理</el-menu-item>
            <el-menu-item index="/admin/hotel-order">酒店订单管理</el-menu-item>
            <el-menu-item index="/admin/coupons">优惠券管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container style="margin-left: 200px;"> <!-- 根据侧边栏宽度调整此值，留出侧边栏位置 -->
        <el-header style="height: 60px; line-height: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41,.35);">
          <i :class="collapseIcon" @click="handleCollapse" style="font-size: 26px"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/user' }">用户管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/airliner' }">客机管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/flight' }">航班管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/flight-order' }">航班订单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/flight-refund' }">航班退单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/hotel-info' }">酒店信息管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/hotel-room' }">客房信息管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/hotel-order' }">酒店订单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/admin/coupons' }">优惠券管理</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; display: flex; justify-content: flex-end; align-items: center">
            <i class="el-icon-quanping" @click="handleFullScreen" style="font-size: 25px"></i>
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: pointer">
                <img src="@/assets/images/logo1.png" alt="" style="width: 40px; height: 40px; margin: 0 5px">
                <span>管理员</span>
              </div>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isCollapse = ref(false)
const asideWidth = ref('200px')
const collapseIcon = ref('el-icon-s-fold')

const handleFullScreen = () => {
  document.documentElement.requestFullscreen()
}

const handleCollapse = () => {
  isCollapse.value =!isCollapse.value
  asideWidth.value = isCollapse.value? '64px' : '200px'
  collapseIcon.value = isCollapse.value? 'el-icon-s-unfold' : 'el-icon-s-fold'
}
</script>


<style scoped>
.el-menu--inline,.el-menu-item {
  background-color: #000c17!important;
}

.el-submenu__title {
  height: 40px!important;
  line-height: 40px!important;
  padding: 0 25px!important;
  transition: color 0s;
}
.el-menu--collapse.el-submenu__title {
  padding: 0 20px!important;
}
.el-submenu__title>i:nth-child(1) {
  margin-top: 2px;
}
.el-submenu__title>i.el-submenu__icon-arrow {
  margin-top: -5px;
}
.el-menu-item {
  min-width: 0!important;
  width: calc(100% - 10px);
  margin: 5px;
  height: 40px!important;
  line-height: 40px!important;
  border-radius: 5px;
}
.el-menu--inline>.el-menu-item {
  padding-left: 50px!important;
}
.el-menu-item.is-active {
  background-color: dodgerblue!important;
}

.el-menu-item:hover {
  color: #fff!important;
}

.el-submenu__title:hover *,.el-submenu__title:hover {
  color: #fff!important;
}

.el-aside {
  box-shadow: 2px 0 6px rgba(0, 21, 41,.35);
  background-color: #001529;
  color: #fff;
  min-height: 100vh;
  transition: width.3s;
  position: fixed; /* 添加固定定位 */
  top: 0; /* 距离顶部 0 像素 */
  left: 0; /* 距离左侧 0 像素 */
  height: 100vh; /* 设置高度为视口高度，使其撑满整个屏幕高度 */
}
.el-menu--collapse.el-tooltip {
  padding: 0 15px!important;
}
.logo-title {
  margin-left: 5px;
  transition: all.3s;
}
.el-menu {
  transition: all.3s;
}
</style>